<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <!-- 		<meta http-equiv="refresh" content="0;url=xindex.html" /> -->
    <title>leGo-乐鲜生活</title>
    <link rel="stylesheet" type="text/css" href="css/css1.css"/>
    <script src="https://cdn.bootcss.com/headroom/0.9.4/angular.headroom.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.js"></script>
    <script src="resource/ply/Ply.min.js"></script>
    <link rel="stylesheet" href="resource/ply/ply.css">

    <style type="text/css">
        p {
            font-size: 12px;
            color: black;
            margin: 0;
            padding: 0;
        }

        h2, h3 {
            margin: 0;
        }
    </style>

</head>

<body>
<div id="app-sp">
    <!--顶上-->
    <div class="top">
        <div class="top-list">
            <div class="top-left" v-show="!isLogin">
                <a href="#"><span>雷猴~</span></a>
                <a href="login.html"><span>[请登录]</span></a>
                <a href="register.html"><span>[注册]</span></a>
            </div>
            <div class="top-right">
                <a href="user-center.html" v-show="isLogin"><span>{{ nickname }}</span></a>
                <a href="javascript:void(0)"><span style="cursor: pointer" @click="quitLogin" v-show="isLogin">[退出]</span></a>
                <a href="user-order.html"><span>我的订单</span></a>
                <a href="user-collect.html"><span>我的收藏</span></a>
            </div>
        </div>
    </div>
    <!--首页-->
    <div class="head-logo">
        <div class="head-inner">
            <!--logo-->
            <div class="header-logo">
                <a href="index.html">
                    <img src="images/logo.png" alt="乐鲜生活" height="80"/>
                </a>
            </div>
            <!--购物车-->
            <div class="buyCar">
                <a href="buy-cart.html">
                    <span class="shopping-bag-icon"></span>
                </a>
            </div>
            <div class="header-search">
                <!--搜索框-->
                <div class="search-form">
                    <input type="text" name="search-content" class="header-search-input" maxlength="100"
                           placeholder="搜一哈你想搜的内容" v-model="searchContent"/>
                    <a @click="search" class="header-search-button">
                        <span class="header-search-icon"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="header-nav">
        <div class="first-category">
            <ul class="first-category-ul">
                <li v-for="(item,index) in categoryTree" class="first-category-item" @click="onPrimCateClick(index)">
                    <span>{{item.primaryCategory.name}}</span>
                </li>

                <!-- <li class="first-category-item first-last-category">
                <span>天天特价</span>
            </li> -->
            </ul>
        </div>
    </div>
    <div class="head-intro"></div>
    <div class="home-page">
        <div class="store-image">

        </div>
        <!--侧边栏-->
        <div class="side-bar">
            <div class="sort-container">
                <ul>
                    <li class="product-list-nav">
                        <h2>
                            <a href="#">全部分类</a>
                        </h2>
                        <hr/>
                    </li>


                    <li class="product-list-nav" v-for="(item, index) in categoryTree">
                        <h3 @click="popupSidebar(index)">
                            <span class="icon-triangle"></span>{{item.primaryCategory.name}}</h3>
                        <ul class="sort-child-list">
                            <li v-for="(sub_item,sub_index) in item.secondCategory">
                                <a style="cursor: pointer;" @click="onSideBarSubCateClick(index,sub_index)">{{sub_item.name}}</a>
                            </li>

                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <!--瀑布流布局显示图片-->
        <div class="home-main">

            <template v-for="(item,index) in currentGoodsToDisplay">
                <ul class="res-content" v-if="index%4==0">
                    <li style="margin-top: 8px;" @click="onGoodItemClick(index)">
                        <div>
                            <a href="pro-detail.html"
                               style="height: 280px;width: 222px;display: flex;flex-flow: column nowrap; justify-content: center">
                                <img :src="item.image_main" class="home-page-img-item" width="222">
                            </a>
                            <a href="www.yohobuy.com/product/51907864.html"
                               style="color: black; font-size: 12px; display: block; text-decoration: none; margin-top: 8px;">{{item.goods_name}}</a>
                            <p>{{item.store_name}}</p>
                            <p>￥{{item.price}}</p>
                        </div>
                    </li>
                </ul>
                <ul class="res-content" v-else-if="index%4==1">
                    <li style="margin-top: 8px;" @click="onGoodItemClick(index)">
                        <div>
                            <div>
                                <a href="pro-detail.html"
                                   style="height: 280px;width: 222px;display: flex;flex-flow: column nowrap; justify-content: center">
                                    <img :src="item.image_main" class="home-page-img-item" width="222">
                                </a>
                                <a href="www.yohobuy.com/product/51907864.html"
                                   style="color: black; font-size: 12px; display: block; text-decoration: none; margin-top: 8px;">{{item.goods_name}}</a>
                                <p>{{item.store_name}}</p>
                                <p>￥{{item.price}}</p>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="res-content" v-else-if="index%4==2">
                    <li style="margin-top: 8px;" @click="onGoodItemClick(index)">
                        <div>
                            <div>
                                <a href="pro-detail.html"
                                   style="height: 280px;width: 222px;display: flex;flex-flow: column nowrap; justify-content: center">
                                    <img :src="item.image_main" class="home-page-img-item" width="222">
                                </a>
                                <a href="www.yohobuy.com/product/51907864.html"
                                   style="color: black; font-size: 12px; display: block; text-decoration: none; margin-top: 8px;">{{item.goods_name}}</a>
                                <p>{{item.store_name}}</p>
                                <p>￥{{item.price}}</p>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="res-content" v-else-if="index%4==3">
                    <li style="margin-top: 8px;" @click="onGoodItemClick(index)">
                        <div>
                            <div>
                                <a href="pro-detail.html"
                                   style="height: 280px;width: 222px;display: flex;flex-flow: column nowrap; justify-content: center">
                                    <img :src="item.image_main" class="home-page-img-item" width="222">
                                </a>
                                <a href="www.yohobuy.com/product/51907864.html"
                                   style="color: black; font-size: 12px; display: block; text-decoration: none; margin-top: 8px;">{{item.goods_name}}</a>
                                <p>{{item.store_name}}</p>
                                <p>￥{{item.price}}</p>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- <ul class="res-content" v-else-if="index%4==3"></ul> -->

            </template>

        </div>
    </div>
</div>

</body>
<script src="js/result.js"></script>
</html>



